<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01_ref</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
    <div id="app"></div>
    <script type="text/babel">
        /*
        新版的React需要我们通过React.createRef()来使用ref功能
        */
        let app = document.getElementById("app")
        let {Fragment,Component} = React

        class App extends Component{
            constructor(props) {
                super(props);
                //创建用户名ref
                this.usernameRef = React.createRef();
            }
            //创建密码ref
            passwordRef = React.createRef();
            render(){
                return <fieldset>
                    <legend><h2>登录</h2></legend>
                    <input type="text" placeholder="账号" ref={this.usernameRef}/>
                    <input type="password" placeholder="密码" ref={this.passwordRef}/>
                    <button onClick={()=>this.login()}>登录</button>
                </fieldset>
            }
            login(){
                //通过ref获取输入框的值
                let un = this.usernameRef.current.value;
                let pw = this.passwordRef.current.value;
                console.log(un,pw)
            }
        }

        ReactDOM.render(<App></App>,app)
    </script>
</body>
</html>